{template 'common/header'}
<style>
    .tree {
        min-height:20px;
        padding:19px;
        margin-bottom:20px;
        background-color:#fbfbfb;
        border:1px solid #999;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
    }
    .tree li {
        list-style-type:none;
        margin:0;
        padding:10px 5px 0 5px;
        position:relative
    }
    .tree li::before, .tree li::after {
        content:'';
        left:-20px;
        position:absolute;
        right:auto
    }
    .tree li::before {
        border-left:1px solid #999;
        bottom:50px;
        height:100%;
        top:0;
        width:1px
    }
    .tree li::after {
        border-top:1px solid #999;
        height:20px;
        top:25px;
        width:25px
    }
    .tree li span {
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border:1px solid #999;
        border-radius:5px;
        display:inline-block;
        padding:3px 8px;
        text-decoration:none
    }
    .tree li.parent_li>span {
        cursor:pointer
    }
    .tree>ul>li::before, .tree>ul>li::after {
        border:0
    }
    .tree li:last-child::before {
        height:30px
    }
    .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
        background:#eee;
        border:1px solid #94a0b4;
        color:#000
    }


</style>
<script>
    $(function(){
        $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
        $('.tree li.parent_li > span').on('click', function (e) {
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } else {
                children.show('fast');
                $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
            }
            e.stopPropagation();
        });
        $(".add").click(function(){
            var name = $("#name").val();
            var top_id = $("#top_id").val();
            if(name != ''){
                var url = "{php echo $this->createWebUrl('region',array('op' => 'add'))}";
                $.ajax({
                    type : "post",
                    url : url,
                    data : {'name' : name, 'top_id' : top_id},
                    success : function(data){
                        if(data == 111){
                           alert("操作成功！");
                           location.reload();
                        }else{
                            alert(data);
                        }
                    }
                });
            }else{
                alert("请输入区域名称");
            }
        });
        $(".order-list").on('blur',function(){
            var list = $(this).val();
            var region_id = $(this).attr('region-id');
            var url = "{php echo $this->createWebUrl('region',array('op' => 'change_list'))}";
            $.ajax({
                type : 'post',
                url : url,
                data : {'list' : list, 'region_id' : region_id},
                success : function(data){
                    if(data == 111){
                        location.reload();
                    }else{
//                        alert(data);
                    }
                }
            });
        });
        $(".del_region").click(function(){
            var region_id = $(this).attr("region_id");
            if(region_id > 0){
                if(confirm("是否确定删除区域以及下属所有区域？")){
                    var url = "{php echo $this->createWebUrl('region',array('op' => 'del_region'))}";
                    $.ajax({
                        type : "post",
                        url : url,
                        data : {'region_id' : region_id},
                        success : function(data){
                            if(data == 111){
                                alert("操作成功！");
                                location.reload();
                            }else{
                                alert(data);
                            }
                        }
                    });
                }
            }
        });
        $(".change_name").blur(function(){
            var new_name = $(this).val();
            var region_id = $(this).attr("region_id");
            if(region_id > 0 && new_name != ''){
                var url = "{php echo $this->createWebUrl('region',array('op' => 'change_region'))}";
                $.ajax({
                    type : 'post',
                    url : url,
                    data : {'new_name' : new_name, 'region_id' : region_id},
                    success : function(data){
                        if(data == 111){
                            alert("修改成功！");
                            location.reload();
                        }else{
                            alert(data);
                        }
                    }
                });
            }else{
                alert("参数错误！");
            }
        });
        $(".top").change(function(){
            var top_id = $(this).val();
            var region_id = $(this).attr("region_id");
            if(region_id > 0){
                var url = "{php echo $this->createWebUrl('region',array('op' => 'change_region'))}";
                $.ajax({
                    type : "post",
                    url : url,
                    data : {'region_id' : region_id, 'top_id' : top_id},
                    success : function(data){
                        if(data == 111){
                            alert("修改成功！");
                            location.reload();
                        }else{
                            alert("服务器繁忙，请重试！");
                        }
                    }
                });
            }
        });
        $(".change_user").change(function(){
            var user_id = $(this).val();
            var region_id = $(this).attr('region_id');
            if(region_id > 0){
                var url = "{php echo $this->createWebUrl('region',array('op' => 'change_user'))}";
                $.ajax({
                    type : "post",
                    url : url,
                    data : {"region_id" : region_id, 'user_id' : user_id},
                    success : function(data){
                        if(data == 111){
                            alert("设置成功！");
                            location.reload();
                        }else{
                            alert("服务器繁忙，请重试！");
                        }
                    }
                });
            }else{
                alert("参数错误！");
            }
        });
    });
</script>
<ul class="nav nav-tabs">
    <li class="active" ><a href="{php echo $this->createWebUrl('region', array('op'=>'index'))}">区域管理</a></li>
</ul>
<div class="main">
    <div class="row">
        <div class="col-xs-3">
            <input type="text" id="name" class="form-control" placeholder="区域名称"/>
        </div>
        <div class="col-xs-3">
            <select class="form-control" id="top_id">
                <option value="0">上级区域</option>
                {loop $top $t}
                <option value="{$t['id']}">{$t['name']}</option>
                {/loop}
            </select>
        </div>
        <div class="col-xs-2">
            <button class="btn btn-primary add">添加</button>
        </div>
    </div>
    <br />
    <div>
        <table class="table">
            <tr>
                <th>区域</th>
                <th>收款员</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
            {loop $regions $region}
            <tr>
                <td>
                    <input type="text" value="{$region['name']}" class="form-control change_name" region_id="{$region['id']}" />
                </td>


                <td>
                    <select class="form-control change_user" region_id="{$region['id']}">
                        <option value="0">请选择收款员</option>
                        {loop $all_users $user}
                        <option value="{$user['uid']}" {if $user['uid'] == $region['user_id']} selected="selected" {/if}>{$user['username']}</option>
                        {/loop}
                    </select>
                </td>
                <td>
                    <input type="text" value="{$region['order_list']}" class="form-control order-list" region-id="{$region['id']}" />
                </td>
                <td>
                    <button class="btn btn-danger del_region" region_id="{$region['id']}">删除</button>
                </td>
            </tr>
            {/loop}
        </table>

        <div class="tree well">
            <ul>
                <li>
                    <ul>
                        {loop $top $t}
                        <li>
                            <span><i class="glyphicon glyphicon-folder-open"></i>{$t['name']}</span>
                            <ul>
                                {loop $t['regions'] $region}
                                <li>
                                    <span><i class="glyphicon glyphicon-file"></i>{$region['name']} </span>
                                </li>
                                {/loop}
                            </ul>
                        </li>
                        {/loop}
                    </ul>
                </li>
            </ul>
        </div>

    </div>
</div>



{template 'common/footer'}